<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat with AI</title>
    <style>
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background-color: #f0f8ff;
            background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }
        h1 {
            color: #ff6f61;
            font-size: 3rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        .chat-container {
            width: 600px;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .chat-history {
            height: 300px;
            overflow-y: auto;
            border: 2px solid #ddd;
            border-radius: 10px;
            padding: 10px;
            background-color: #f9f9f9;
        }
        .chat-message {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 10px;
            max-width: 80%;
        }
        .user-message {
            background-color: #ff6f61;
            color: white;
            align-self: flex-end;
        }
        .ai-message {
            background-color: #61daff;
            color: white;
            align-self: flex-start;
        }
        .input-container {
            display: flex;
            gap: 10px;
        }
        #userInput {
            flex: 1;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 1rem;
        }
        button {
            padding: 10px 20px;
            background-color: #ff6f61;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #ff4a3d;
        }
    </style>
</head>
<body>
    <h1>Chat with AI</h1>
    <div class="chat-container">
        <!-- 聊天历史记录 -->
        <div class="chat-history" id="chatHistory">
            <!-- 历史记录会动态添加到这里 -->
        </div>
        <!-- 输入框和发送按钮 -->
        <div class="input-container">
            <input type="text" id="userInput" placeholder="Type your message here...">
            <button onclick="sendMessage()">Send</button>
        </div>
    </div>

    <script>
        // 发送消息的函数
        async function sendMessage() {
            const userInput = document.getElementById('userInput');
            const chatHistory = document.getElementById('chatHistory');

            // 获取用户输入
            const userMessage = userInput.value.trim();
            if (!userMessage) return; // 如果输入为空，直接返回

            // 添加用户消息到历史记录
            const userMessageElement = document.createElement('div');
            userMessageElement.className = 'chat-message user-message';
            userMessageElement.textContent = userMessage;
            chatHistory.appendChild(userMessageElement);

            // 清空输入框
            userInput.value = '';

            try {
                // 发送请求到后端
                const response = await fetch('/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ message: userMessage }),
                });

                // 获取 AI 回复
                const data = await response.json();
                const aiMessage = data.response;

                // 添加 AI 回复到历史记录
                const aiMessageElement = document.createElement('div');
                aiMessageElement.className = 'chat-message ai-message';
                aiMessageElement.textContent = aiMessage;
                chatHistory.appendChild(aiMessageElement);

                // 滚动到底部
                chatHistory.scrollTop = chatHistory.scrollHeight;
            } catch (error) {
                console.error('Error:', error);
                const errorMessageElement = document.createElement('div');
                errorMessageElement.className = 'chat-message ai-message';
                errorMessageElement.textContent = 'Failed to get response from AI.';
                chatHistory.appendChild(errorMessageElement);
            }
        }

        // 按回车键发送消息
        document.getElementById('userInput').addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>